<script setup lang="ts">
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const usernameInput = ref("");
const password = ref("");
const isLoggedIn = computed(() => {
  return userStore.authToken && userInfo.value && userInfo.value.username;
});

const login = async () => {
  if (usernameInput.value)
    userStore.login({
      username: usernameInput.value,
      password: password.value,
    });
  else ElMessage.error("请输入用户名！");
};

const { enter } = useMagicKeys();
watch(enter, (v) => {
  if (v) login();
});

const logout = async () => {
  userStore.logOut();
};

const framework = [
  {
    title: "Nuxt3",
    icon: "i-logos-nuxt-icon",
    url: "https://nuxt.com/docs/getting-started/introduction",
  },
  {
    title: "Vue3",
    icon: "i-logos-vue",
    url: "https://cn.vuejs.org/guide/introduction.html",
  },
  { title: "VueUse", icon: "i-logos-vueuse", url: "https://vueuse.org/guide/" },
  {
    title: "Typescript",
    icon: "i-logos-typescript-icon",
    url: "https://ts.xcatliu.com/",
  },
  {
    title: "Eslint",
    icon: "i-logos-eslint",
    url: "https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint",
  },
  {
    title: "Commitizen",
    icon: "i-logos-commitizen",
    url: "https://cz-git.qbb.sh/zh/guide/introduction",
  },
];
const ui = [
  {
    title: "Element-Plus",
    icon: "i-logos-element",
    url: "https://element-plus.org/zh-CN/",
  },
  {
    title: "Unocss",
    icon: "i-logos-unocss",
    url: "https://antfu.me/posts/reimagine-atomic-css-zh",
  },
  {
    title: "TailwindCSS",
    icon: "i-logos-tailwindcss-icon",
    url: "https://tailwindcss.com/",
  },
  {
    title: "Iconify",
    icon: "i-carbon-face-satisfied",
    url: "https://iconify.design/",
  },
];

function toOfficial(url: string) {
  window.open(url, "_blank");
}
</script>

<template>
  <main class="w-1/2 ma py-20 px-10 text-center">
    <h1 class="flex items-center justify-center color-green-5 text-5xl gap-6">
      <img src="/image/admin3-logo.png" alt="Admin3" height="100" />
      Admin3
    </h1>
    <div class="color-teal-6 text-xl py-4">
      <span class="pr-2">一个基于 Nuxt 3 的后台管理模板，查看</span>
      <AdminIcon name="i-twemoji-open-book" class="vertical-bottom" />
      <a
        class="underline font-semibold cursor-pointer"
        @click="navigateTo('/doc/guide')"
      >
        <span class="pl-1">使用指南</span>
      </a>
    </div>

    <ClientOnly>
      <div v-if="isLoggedIn" class="mt-4">
        <el-row class="flex justify-center mb-4">
          <span>{{ userInfo.username }}，你好！</span>
        </el-row>
        <el-row class="flex justify-center">
          <el-button type="success" plain @click="navigateTo('/admin')">
            <AdminIcon name="i-carbon-carbon-for-ibm-dotcom" class="pr-1" />
            前往管理后台
          </el-button>
          <el-button type="primary" plain @click="logout()">
            <AdminIcon name="i-carbon-logout" class="pr-1" />
            登出
          </el-button>
        </el-row>
      </div>
      <div v-else>
        <el-input
          v-model="password"
          autofocus
          class="m-4 w[350px] h-12"
          type="password"
          placeholder="输入密码"
        />
        <el-input
          v-model="usernameInput"
          autofocus
          class="m-4 w[350px] h-12"
          placeholder="输入任意用户名"
        >
          <template #prepend>
            <AdminIcon name="i-twemoji-smiling-face-with-sunglasses" />
          </template>
          <template #append>
            <el-button @click="login()"> 登录 </el-button>
          </template>
        </el-input>
      </div>
    </ClientOnly>

    <div class="mt-16 flex justify-center gap-2">
      <el-link
        class="text-2xl"
        :underline="false"
        href="https://github.com/vampirefan/admin3"
        target="_blank"
      >
        <AdminIcon name="i-logos-github-octocat" />
      </el-link>
      <AdminDarkToggle class="pb-2 text-xl" />
    </div>

    <el-divider />

    <h3 class="color-green-5 text-left ml-8">Frameworks</h3>
    <div class="flex flex-wrap gap-4 mx">
      <el-card
        v-for="item in framework"
        :key="item.title"
        shadow="hover"
        class="mb cursor-pointer w[215px]"
        @click="toOfficial(item.url)"
      >
        <div :class="`${item.icon} inline-block`" />
        <span class="pl">{{ item.title }}</span>
      </el-card>
    </div>
    <h3 class="color-green-5 text-left ml-8">UIs</h3>
    <div class="flex flex-wrap gap-4 mx">
      <el-card
        v-for="item in ui"
        :key="item.title"
        shadow="hover"
        class="mb cursor-pointer w[215px]"
        @click="toOfficial(item.url)"
      >
        <div :class="`${item.icon} inline-block`" />
        <span class="pl">{{ item.title }}</span>
      </el-card>
    </div>
  </main>
</template>
